<template>
  <div class="date-wrapper">
    <div>
      <div class="supplier-opera">
        <div class="opera-item">
          <mt-button type="default" size="small" v-on:click="showStart" v-if="start === ''">开始日期</mt-button>
          <mt-button type="default" size="small" v-on:click="showStart" v-else>{{getDate(start)}}</mt-button>
        </div>
        <div class="opera-item">
          <mt-button type="default" size="small" v-on:click="showEnd" v-if="end === ''">结束日期</mt-button>
          <mt-button type="default" size="small" v-else>{{getDate(end)}}</mt-button>
        </div>
        <div class="">
          <mt-button type="primary" size="small" v-on:click="search">搜  索</mt-button>
        </div>
      </div>
      <mt-datetime-picker
        ref="pickerStart"
        type="date"
        v-model="start" @confirm="setStart">
      </mt-datetime-picker>
      <mt-datetime-picker
        ref="pickerEnd"
        type="date"
        v-model="end" @confirm="setEnd">
      </mt-datetime-picker>
    </div>
    <div class="list-wrapper">
      <table>
        <thead>
        <tr>
          <th>#</th>
          <th>名称</th>
          <th>数量</th>
          <th>规格</th>
          <th>单位</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in list">
          <td>{{index+1}}</td>
          <td>{{item.pname}}</td>
          <td>{{item.product_num}}</td>
          <td>{{item.precise_unit}}</td>
          <td>{{item.sku_name}}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <v-nav :isActive="isActive"></v-nav>
  </div>
</template>

<script type="text/ecmascript-6">
  import nav from '@/components/nav/nav'
  import moment from 'moment'
  import { Toast } from 'mint-ui'
  export default {
    data () {
      return {
        isActive: '0',
        start: '',
        end: '',
        list: '',
        listLen: 0
      }
    },
    components: {
      'v-nav': nav
    },
    beforeCreate: function () {
      var isLogin = this.$store.getters.getLogin
      if (!isLogin) {
        this.$router.push({path: '/'})
      }
    },
    methods: {
      showStart: function () {
        this.$refs.pickerStart.open()
      },
      setStart: function (val) {
        this.start = val
      },
      showEnd: function () {
        this.$refs.pickerEnd.open()
      },
      setEnd: function (val) {
        this.end = val
      },
      search: function () {
        var url = process.env.BASE_API + '/supplier/supplies/index?begainDate=' + this.getDate(this.start) + '&endDate=' + this.getDate(this.end) + '&token=' + this.$store.getters.getToken
        this.$http.get(url, {emulateJSON: true}).then(response => {
          var res = response.body
          if (res.code === 1003) {
            this.$store.dispatch('setLogin', 0)
            this.$store.dispatch('setToken', '')
            this.$router.push({path: '/'})
          } else if (res.code === 1000) {
            this.listLen = res.data.count
            this.list = res.data.list
          }
          Toast({
            message: res.message,
            position: 'bottom',
            duration: 5000
          })
        })
      },
      getDate: function (time) {
        return moment(time).format('YYYY-MM-DD')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .date-wrapper
    margin-bottom: 43px;
    .supplier-opera
      display: flex;
      padding: 5px 0;
      div:last-child
        padding: 0 10px;
      .opera-item
        flex: 1;
        text-align: center;
    .list-wrapper>table
      width: 100%;
      max-width: 100%;
      border-collapse collapse;
      thead>tr>th
        padding: 8px;
        font-size: 12px;
        vertical-align: bottom;
        border-top: 2px solid #ddd;
        border-bottom: 2px solid #ddd;
        text-align: left;
      tbody>tr>td
        padding: 8px;
        font-size: 10px;
        vertical-align: top;
        border-top: 1px solid #ddd;
</style>
